<template>
  <view class="article-container">
    <view class="category">
      <view class="cg-item" :class="selected === item.articleCategoryId ? 'selected' : ''" v-for="(item, i) in categoryList" :key="i" @click="onFilter(item)">{{ item.categoryName }}</view>
    </view>
    <view class="items">
      <view v-for="(item, i) in list" :key="i" class="item" @click="onView(item)">
        <view class="item-cover">
          <image :src="item.thumb" class="cover" mode=""></image>
        </view>
        <view class="item-main">
          <view class="im-title">{{ item.title }}</view>
          <view class="im-content"><rich-text>{{ item.description }}</rich-text></view>
          <view class="im-time">{{ item.createTime }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        list: [],
        categoryList: [],
        selected: '',
      }
    },
    computed: {
      ...mapGetters(['articleCategoryId'])
    },
    watch: {
      articleCategoryId() {
        if (this.articleCategoryId) {
          this.selected = this.articleCategoryId
          this.getList()
        }
      }
    },
    onLoad(query) {
      if (this.articleCategoryId) {
        this.selected = this.articleCategoryId
      }
      this.getCategory()
      this.getList()
    },
    methods: {
      getList() {
        this.$http({
          url: `/article/getArticleList?articleCategoryId=${this.selected}`
        }).then(res => {
          this.list = res.data.articleList
        })
      },
      getCategory() {
        this.$http({
          url: '/article/getCategoryList'
        }).then(res => {
          this.categoryList = res.data.articleCategoryList
        })
      },
      onFilter(item) {
        this.selected = item.articleCategoryId
        this.getList()
      },
      onView(item) {
        uni.navigateTo({
          url: `./detail?id=${item.articleId}`
        })
      }
    }
  }
</script>

<style lang="less">
  .article-container{
    min-height: 100vh;
    padding-top: 10rpx;
  }
  .category{
    height: 100rpx;
    padding: 20rpx;
    display: flex;
    .cg-item{
      height: 60rpx;
      line-height: 60rpx;
      padding: 0 20rpx;
      border: 1px solid #eee;
      border-radius: 40rpx;
      font-size: 24rpx;
      margin-right: 20rpx;
      &.selected{
        border-color: #f60;
      }
    }
  }
  .items{
    margin: 0 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .item{
      border-bottom: 1px solid #e8e8e8;
      padding: 10rpx 20rpx 10rpx 0;
      display: flex;
      .item-cover{
        width: 120rpx;
        margin-right: 20rpx;
      }
      .cover{
         width: 120rpx;
         height: 120rpx;
      }
      .item-main{
        flex: 1;
        .im-title{
          font-size: 28rpx;
          color: #333;
          margin-bottom: 10rpx;
        }
        .im-content{
          font-size: 24rpx;
          color: #666;
          margin-bottom: 10rpx;
        }
        .im-time{
          font-size: 24rpx;
          color: #999;
          
        }
      }
    }
  }
</style>
